<template>
  <div style="color:blue;font-size:30px;">THIS IS CATEGORY DETAIL</div>
  <div class="category-detail-container">
    <!-- 分類圖片、標題、描述 -->
    <img :src="category.image" class="category-img" />
    <h2 class="category-title">{{ category.name }}</h2>
    <div class="category-desc">{{ category.description }}</div>

    <!-- 分類下的熱門帖子列表 -->
    <div class="hot-posts">
      <h3>該分類下的熱門帖子</h3>
      <el-table :data="postList">
        <el-table-column prop="content" label="內容" />
        <el-table-column prop="gmtCreate" label="時間" />
      </el-table>
    </div>

    <!-- 打賞區域 -->
    <div style="text-align:center; margin-top: 32px;">
      <el-input-number v-model="totalAmount" :min="1" :max="100" label="打賞金額" style="margin-right: 12px;" />
      <el-button type="success" @click="directAlipay">
        打賞本分類
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const category = ref({ name: '分類名', image: '', description: '分類描述' })
const postList = ref([])
const totalAmount = ref(1)
const subject = ref('打賞-' + (category.value.name || '分類'))
const orderNo = ref('order_' + Date.now())
const directAlipay = () => {
  const payUrl = `https://4467bce9ff84.ngrok-free.app/edeorder/order/pay?subject=${encodeURIComponent(subject.value)}&traceNo=${orderNo.value}&totalAmount=${totalAmount.value}`
  window.location.href = payUrl
}
onMounted(async () => {
  // 根據路由參數獲取分類詳情
  const res = await axios.get(`http://localhost:10010/flower/category/${route.params.id}`)
  if (res.data && res.data.success) {
    category.value = res.data.data.item
  }
  // 你可以在這裡繼續獲取熱門帖子列表
})
</script>

<style scoped>
.category-detail-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.category-img {
  width: 320px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  margin: 0 auto 24px auto;
}
.category-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 12px;
}
.category-desc {
  text-align: center;
  color: #888;
  font-size: 1.1rem;
  margin-bottom: 32px;
}
.hot-posts {
  margin-bottom: 32px;
}
</style> 